<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>学生信息管理</title>
  <link rel="stylesheet" href="css/index.css" />
</head>

<body>
  <h1>新增学员</h1>
  <form action='http://www.baidu.com/s?' class="info" autocomplete="off">
    姓名：<input type="text" class="uname" name="uname" />
    年龄：<input type="text" class="age" name="age" />
    性别:
    <select name="gender" class="gender">
      <option value="男">男</option>
      <option value="女">女</option>
    </select>
    薪资：<input type="text" class="salary" name="salary" />
    就业城市：<select name="city" class="city">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="广州">广州</option>
      <option value="深圳">深圳</option>
      <option value="曹县">曹县</option>
    </select>
    <button class="add">录入</button>


  </form>



  <h1>就业榜</h1>
  <table>
    <thead>
      <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
        <th>薪资</th>
        <th>就业城市</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>

    </tbody>
  </table>
  <script>
    let from = document.querySelector('.info')
    let uname = document.querySelector('.uname')
    let age = document.querySelector('.age')
    let gender = document.querySelector('.gender')
    let salary = document.querySelector('.salary')
    let city = document.querySelector('.city')
    let data = []
    let tbody = document.querySelector('tbody')

    from.addEventListener('submit', function (e) {
      e.preventDefault()
      let arr = document.querySelectorAll('[name]')
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].value === '') {
          return alert(`${arr[i].name}不能为空`)
        }
      }

      let da = {
        id: data.length === 0 ? 1 : data[data.length - 1].id + 1,
        uname: uname.value,
        age: age.value,
        gender: gender.value,
        salary: salary.value,
        city: city.value
      }
      data.push(da)
      console.log(data);

      this.reset();
      name()
    })
    tbody.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        data.splice(e.target.dataset.id, 1)
        name()
      }
    })

    function name() {
      tbody.innerHTML = ''
      for (let i = 0; i < data.length; i++) {

        let tr = document.createElement('tr')
        tr.innerHTML = `
          <td>${data[i].id}</td>
          <td>${data[i].uname}</td>
          <td>${data[i].age}</td>
          <td>${data[i].gender}</td>
          <td>${data[i].salary}</td>
          <td>${data[i].city}</td>
          <td>
            <a href="javascript:" data-id=${i}>删除</a>
          </td>
        `
        tbody.appendChild(tr)
      }
    }





  </script>

</body>

</html>